<template>
	<view class="progress-box-content">
		<view class="progress-box">
			<!-- 波浪效果元素 设置了一个css变量 然后再css中计算top值会用到 -->
			<view class="progress"
				:style="{'--progress': `${progress}%`}"></view>
			<!-- 进度数字 -->
			<view class="progress-value-p">
				<!-- <view class="value">{{progress}}%</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"progress-box",
		props: {
			progress: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
			};
		}
	}
</script>

<style lang="scss">
	.content {
		// width: 100vw;
		// height: 100vh;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
	}
	/* 定一个旋转动画 用于实现波浪效果 */
	 @keyframes progressRotate {
	    0% {
			transform: rotate(0deg);
	    }
	    100% {
	        transform: rotate(360deg);
	    }
	}
	.progress-box {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		border: 5rpx solid #FE3B33;
		border-radius: 50%;
		background: #fff;
		/* 最关键的属性 */
		overflow: hidden;
		/* 这里是为了防止再ios设备上overflow不生效问题*/
		-webkit-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);
		-webkit-mask-image: -webkit-radial-gradient(white, black);
		/* 设置进度条样式 */
		.progress {
			position: absolute;
			/* 波浪占据外层圆形区域的百分比 由 --progress控制 */
			top: calc(100% - var(--progress));
			left: -72rpx;
			z-index: 9;
			width: 288rpx;
			height: 288rpx;
			border-radius: 36%;
			background: #FE3B33;
			/* 添加旋转动画效果 */
			animation: progressRotate 8.5s linear infinite;
			/* 由于上面使用了transform 且动画中也使用了transform 设置该属性使其叠加生效 */
			animation-composition: add;
		}
		/* 设置进度数字样式 */
		.progress-value-p {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		    position: absolute;
		    z-index: 10;
			width: 100%;
			height: 100%;
			.value {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 26rpx;
				font-weight: bold;
				color: black;
				line-height: 23rpx;
				text-align: left;
				margin-bottom: 30rpx;
				font-style: normal;
				text-transform: none;
			}
		}
	}
</style>
